<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>topbar</title>
		<link rel="stylesheet"  href="font/iconfont.css" />
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			a{
				text-decoration: none;
				color: #fff;
			}
			ul,li{
				list-style: none;
			}
			.bar-bg{
				display: block;
				width: 100%;
				background-color: #DD2727;
				opacity: .95;
				height: 50px;
				z-index: 10000;
				position: fixed;
				transition: top .3s ease-out;
			}
			.topbar-wrap{
				position:fixed;
				width:100%;
				height:50px;
				transition: top .3s ease-out;
				box-shadow: 0 0 4px #eaeaea;
				z-index: 10000;
				opacity: 1;
			}
			.topbar{
				width:1260px;
				height:50PX;
				margin:0 auto;
				top: 0;
				width: 1230px;
				padding-right: 30px;
				background-color: transparent;
				position: relative;
				height: 50px;
				margin: 0 auto;
				border: 0;
				
			}
			.bar-logo{
				    width: 160px;
				    margin-top: 12px;
				    position: absolute;
				    top: 0;
				    left: 0;
				    z-index: 20;
				    height: 30px;
				    line-height: 30px;
				    color: #fff;
				    font-size: 28px;
			}
			.bar-search{
				float: none !important;
				padding-top: 12px;
				width: 740px !important;
				position: relative;
				z-index: 10;
				height: 30px;
				margin: 0 auto;
			}
			.bar-ipt{
				float: none !important;
				width: 740px !important;
				position: relative;
				z-index: 10;
				height: 30px;
				margin: 0 auto;
				border:0;
				text-indent:12px;
			}
			.bar-btn{
				display:block;
				right: -2px;
				height: 30px;
				top: 12px;
				width: 90px;
				border: 0;
				font-size: 16px;
				letter-spacing: 4px;
				cursor: pointer;
				color: #fff;
				background-color: #c40000;
				position: absolute;
				z-index: 10;
				text-align:center;
				line-height:32px;
			}
			.search-list{
				position:absolute;
				left:0;
				top:42px;
				width:650px;
				height:300px;
				border:1px solid #ccc;
				
				display:none;
				z-index: 100;
				background:#fff;
	
			}
			.search-list li{
				position:relative;
				display: block;
				height:30px;
				width:650px;
			}
			.search-list  li a{
				display: block;
				padding:6px 12px;
				height:18px;
				line-height:18px;
				width:650px;
				color:#424242;
			}
			.search-list li span{
				display: inline-block;
				position: absolute;
				right: 15px;
				top: 6px;
				height:18px;
				line-height:18px;
				color: #b0b0b0;
			}
			
			.search-active{
				background:#eee;
			}
			.active{
				background:#C40000;
			}
			
			
			/*预览图放大*/
			.preview-wrap{
				width:1260px;
				height:800px;
				padding-top:50px;
				margin: 0 auto;
			}
			.preview{
				width:410px;
				text-align:center;
				margin-right:10px;
				
			}
			.preview-img{
				width:408px;
				height:408px;
				position: relative;
				border:1px solid #ddd;
			}
			.preview-img img{
				width:408px;
				height:408px;
			}
			.Loupe{
				width:204px;
				height:204px;
				visibility: visible;
				border:1px solid #aaa;
				position: absolute;
				z-index: 10;
				background:#fede4f;
				opacity:0.5;
				filter:alpha(opacity=50);
				cursor: move;
				top:0;
				left:0;
				display: none;
			}
			.Loupe-div{
				position: absolute;
				top:50px;
				left:500px;
				width:400px;
				height:400px;
				display: block;
				border:1px solid #e4e4e4;
				overflow: hidden;
				text-align: center;
				z-index: 100;
				display: none;
			}
			.bigImg{
				width:800px;
				height:800px;
				position:absolute;
				left:-100px;
				top:-100px;
			}
			.preview-little{
				float:left;
				height:90px;
				overflow: hidden;
				position: relative;
				width:382px;
				margin-left:15px;
			}
			.img-prev,.img-next{
				background:url(../images/d-img-m.png) no-repeat;
				cursor: pointer;
				opacity: 0.7;
				filter:alpha(opacity=70);
				float: left;
				height:70px;
				width:15px;
				margin-top:9px;
			}
			.img-next{
				background-position: 0 -140px;
				float:right;
			}
			.img-prev:hover{
				background-position:0 -70px;
			}
			.img-next:hover{
				background-position:0 -210px;
			}
			.preview-little-img{
				width:350px;
				position: relative;
				margin-top:4px;
				float:left;
				height:90px;
			}
			.img-box{
				overflow: hidden;
				position: absolute;
				visibility: visible;
				width:5000px;
			}
			.preview-little-img li{
				float:left;
				margin:10px 5px;
				text-align: center;
			}
			.preview-little-img li img{
				width:58px;
				height:58px;
				vertical-align: top;
				border:1px solid #959595;
			}
						
		</style>
		<script src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript">
			(function($){
				$(function(){
					var
						oSeachContent = $('.bar-ipt'),
						oSearchList   = $('.search-list'),
						iSearchIndex  = -1,
						sOriHtml 	  = oSearchList.html();
					oSeachContent.focus(function () {
						console.log('aaaa')
						oSearchList.css('display', 'block');
					}).blur(function () {
						oSearchList.css('display', 'none');
					}).keyup(function (ev) {
						var
							ev = ev || window.event,
							aLi = $('.search-list li');
						if(ev.keyCode === 38 || ev.keyCode === 40) {
							if(ev.keyCode === 38 && iSearchIndex > 0) {
								iSearchIndex--;
							} else if(ev.keyCode === 40 && iSearchIndex < aLi.length - 1) {
								iSearchIndex++;
							}
							oSeachContent.val(aLi.removeClass('active').eq(iSearchIndex).addClass('active').data('key'));
						}
					}).bind('input propertychange', function () {
						var sSearchCon = $(this).val();
						if(sSearchCon) {
							$.ajax({
								url: 'http://search.mi.com/search/expand',
								data: {keyword: sSearchCon},
								jsonp: 'jsonpcallback',
								dataType: 'jsonp',
								success: function (data) {
									var sHtml = '';
									data.forEach(function (v) {
										sHtml += '<li data-key="' + v.Key + '"><a href="javascript:;"><span>约有' + v.Rst + '件</span>' + v.Key + '</a></li>';
									});
									if(sHtml) {
										oSearchList.css('display', 'block').html(sHtml);
									} else {
										oSearchList.css('display', 'none');
									}
									iSearchIndex = -1;
								}
							});
						} else {
							oSearchList.html(sOriHtml);
							iSearchIndex = -1;
						}
					})
					
					
			//////////////////////////////////////////
			//详情页放大镜
		$('.img-box li').mouseover(function(){
    		$('.preview-img img').attr('src',$(this).find('img').attr('src'));
    		$('.Loupe-div img').attr('src',$(this).find('img').attr('src'));
    	});
    	$('.preview-img').hover(
    		function(){
    			$('.Loupe').css('display','block');
    			$('.Loupe-div').css('display','block');
    		},
    		function(){
    			$('.Loupe').css('display','none');
    			$('.Loupe-div').css('display','none');
    		}
    	);
    	$('.preview-img').mousemove(function(e){
    		var l = e.pageX-$(this).offset().left-102,
    			t = e.pageY-$(this).offset().top-102;
    		if(l<0){
    			l=0;
			}else if(l>202){
				l=202;
			}
			if(t<0){
				t=0;
			}else if(t>202)
			{
				t=202;
			}
    		$('.Loupe').css({
    			left:l,
    			top:t
    		});
    		$('.bigImg').css({
    			top:-parseInt($('.Loupe').css('top'))/408*800,
    			left:-parseInt($('.Loupe').css('left'))/408*800
    		});
    	});
					
				})
			})(jQuery)
		</script>
	</head>
	<body>
		<div class="bar-bg"></div>
		<div class="topbar-wrap">
			<div class="topbar">
				<div class="bar-logo">
					<i class="iconfont">&#xe7c5;</i>
				</div>
				<div class="bar-search">
					<input type="text" class="bar-ipt" placeholder="自然堂点亮水立方"/>
					<a class="bar-btn" href="javascrit:;">搜索</a>
					<ul class="search-list">
						<li data-key="小米手机5"><a href="javascript:;">小米手机5</a><span>5件</span></li>
						<li data-key="小米手机4"><a href="javascript:;">小米手机4</a><span>6件</span></li>
						<li data-key="小米手机3"><a href="javascript:;">小米手机3</a><span>7件</span></li>
						<li data-key="小米手机2"><a href="javascript:;">小米手机2</a><span>8件</span></li>
						<li data-key="小米手机1"><a href="javascript:;">小米手机1</a><span>9件</span></li>
						<li data-key="小米手机5"><a href="javascript:;">小米手机5</a><span>5件</span></li>
						<li data-key="小米手机4"><a href="javascript:;">小米手机4</a><span>6件</span></li>
						<li data-key="小米手机3"><a href="javascript:;">小米手机3</a><span>7件</span></li>
						<li data-key="小米手机2"><a href="javascript:;">小米手机2</a><span>8件</span></li>
						<li data-key="小米手机1"><a href="javascript:;">小米手机1</a><span>9件</span></li>
					</ul>
				</div>
			</div>
		</div>
		
		
		 <div class="preview-wrap">
		 	<div class="preview">
    	         <div class="preview-img">
    	         	<img src="images/1.jpg"/>
    	         	<div class="Loupe"></div>
    	         </div>
    	         <div class="Loupe-div">
    	             <img src="images/1.jpg"/ class="bigImg">
    	         </div>
    	         <div class="preview-little">
    	             <div class="img-prev"></div>
    	             <ul class="preview-little-img">
    	             	<div class="img-box" id="imgBox">
    	             	    <li>
    	             	    	<a href="javascript:;">
    	             	    		<img src="images/1.jpg"/>
    	             	    	</a>
    	             	    </li>
    	             	    <li>
    	             	    	<a href="javascript:;">
    	             	    		<img src="images/2.jpg"/>
    	             	    	</a>
    	             	    </li>
    	             	    <li>
    	             	    	<a href="javascript:;">
    	             	    		<img src="images/3.jpg"/>
    	             	    	</a>
    	             	    </li>
    	             	    <li>
    	             	    	<a href="javascript:;">
    	             	    		<img src="images/4.jpg"/>
    	             	    	</a>
    	             	    </li>
    	             	    <li>
    	             	    	<a href="javascript:;">
    	             	    		<img src="images/5.jpg"/>
    	             	    	</a>
    	             	    </li>
    	             	</div>
    	             </ul>
    	             <div class="img-next"></div>
    	         </div>
    	     </div>
         </div>
	</body>
</html>
